<template>
	<view class="content">
		<text class="commonColor">组件测试</text>  
		<text class="importColor">组件测试</text>  
		<view>button 主要属性 type disable loading size</view>
		<button type="primary">页面主操作 Normal</button>
		<button type="primary" loading="true">页面主操作 Loading</button>
		<button type="primary" disabled="true">页面主操作 Disabled</button>
		<button type="default">页面次要操作 Normal</button>
		<button class="mini-btn" type="warn" size="mini">按钮</button>
		<view class="" style="color:red;">buton的样式在各端不一致,解决方案:</view>
		<view class="" style="color:red;">自己封装一个button</view>
		<view class="" style="color:red;">重写button的样式(条件编译)</view>
		<view class="uni-list-cell">
			<view class="uni-list-cell-db">开启image组件测试</view>
			<switch style="transform:scale(0.7);" :checked="datas.imags" @change="switch1Change" />
		</view>
		<view v-if="datas.imags" class="image-item" v-for="(item,index) in array" :key="index">
			<view class="image-content">
				<image style="width: 200px; height: 200px; background-color: #eeeeee;" :mode="item.mode" :src="netWorkSrc"
					@error="imageError"></image>
			</view>
			<view class="image-title">{{item.text}}</view>
		</view>
		
		<view class="" style="color:red;">image中资源的相对/绝对引用:</view>
		<!-- 绝对路径，/static指根目录下的static目录，在cli项目中/static指src目录下的static目录 -->
		<image class="showImg" src="/static/images/0.jpg" mode=""></image>
		<image class="showImg" src="@/static/images/3.jpg" mode=""></image>
		<!-- 相对路径 -->
		<image class="showImg" src="../../static/images/logo.png"></image>
		<image class="showImg" :src="datas.importSrc" mode=""></image>
		<!-- 相对路径 -->
		<image class="showImg" src="../../static/images/6.jpg" mode=""></image>
		
		<view>通过easycom使用组件无需引入</view>
		<easycom-children></easycom-children>
		<navigator url="/pages/index/index" open-type="switchTab">
			<button size="mini" type="default">返回首页</button>
		</navigator>
	</view>
</template>

<script setup>
	import {
		onBeforeMount,
		onMounted,
		onBeforeUpdate,
		onUpdated,
		onBeforeUnmount,
		onUnmounted,
		onActivated,
		onDeactivated,
		computed,
		ref
	} from "vue"
	import {onLoad,onReady,onShow,onHide,onUnload,onPageScroll} from "@dcloudio/uni-app"
	import importSrc from "./0.jpg";
	import logo from "../../static/images/logo.png";
	
	// 当时该组件为子组件,运行时根据当前页面路由来转换该相对路径，转换可能出错
	// console.log(logo); // 相对路径 import 语句会在编译阶段根据当前文件位置转换为绝对路径
	// 运行时
	// 错误的相对路径用法，image组件会在运行时根据当前页面路由来转换该相对路径，当不同的页面使用custom组件时，转换的路径是不同的
	// 应该使用绝对路径：/static/images/logo.png，这样可以确保在任意页面都访问到正确的图片地址
	
	// 正常情况下，如 image 的 src 中直接引入 static 中 images/logo.png ，可以使用相对路径或绝对路径
	// 而引入 index 下的 icon.png 不管是相对还是绝对路径，都无法显示，所以这时候需要在 js/uts 中 使用 import 来引入
	
	// uni.navigateTo({
	//   // 运行时
	//   // 错误的相对路径用法，路由会在运行时根据当前页面路由来转换该相对路径
	//   // 应该使用绝对路径：/pages/index/index
	//   url: "../../pages/index/index",
	// });
	
	const datas = ref({
		imags:false,
		importSrc:importSrc,
	})
	const array = ref([
		{
			mode: 'scaleToFill',
			text: 'scaleToFill：不保持纵横比缩放图片，使图片完全适应'
		}, {
			mode: 'aspectFit',
			text: 'aspectFit：保持纵横比缩放图片，使图片的长边能完全显示出来'
		}, {
			mode: 'aspectFill',
			text: 'aspectFill：保持纵横比缩放图片，只保证图片的短边能完全显示出来'
		}, {
			mode: 'top',
			text: 'top：不缩放图片，只显示图片的顶部区域'
		}, {
			mode: 'bottom',
			text: 'bottom：不缩放图片，只显示图片的底部区域'
		}, {
			mode: 'center',
			text: 'center：不缩放图片，只显示图片的中间区域'
		}, {
			mode: 'left',
			text: 'left：不缩放图片，只显示图片的左边区域'
		}, {
			mode: 'right',
			text: 'right：不缩放图片，只显示图片的右边边区域'
		}, {
			mode: 'top left',
			text: 'top left：不缩放图片，只显示图片的左上边区域'
		}, {
			mode: 'top right',
			text: 'top right：不缩放图片，只显示图片的右上边区域'
		}, {
			mode: 'bottom left',
			text: 'bottom left：不缩放图片，只显示图片的左下边区域'
		}, {
			mode: 'bottom right',
			text: 'bottom right：不缩放图片，只显示图片的右下边区域'
		},
	])
	const netWorkSrc = ref('https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg');
	 
	function switch1Change (e) {
		console.log('switch1 发生 change 事件，携带值为', e.detail.value)
		datas.value.imags = e.detail.value;
	};
	function imageError(e) {
		console.error('image发生error事件，携带值为' + e.detail.errMsg)
	}
</script>

<style lang="scss" scoped>
	/* 绝对路径 */
	// @import url('../../common/css/common.css'); 
	@import url('@/common/css/common.css'); 
	/* 相对路径 */
	@import './import.css';
	.uni-list-cell {
		display: flex;
		justify-content: space-between;
		padding: 0px 10px;
		border: 1px solid #ccc;
		margin: 3px 0px;
		border-left: 0px;
		border-right: 0px;
		align-items: center;
	}
	.showImg{
		height: 120rpx;
		width: 120rpx;
		margin: 8px;
	}
</style>